<template>
  <!-- 结算 -->
  <div class="payment">
    <div class="header">
      <Lheader>
        <h3 slot="tit">填写订单</h3>
      </Lheader>
    </div>
    <van-notice-bar mode="closeable">未注册可在此页面直接下单，已有花礼网账户 请登录></van-notice-bar>
    <div class="box">
      <van-cell is-link @click="btnDizhi" title="收货地址" />
      <!-- 送达日期 -->
      <van-cell title="选择送达日期" :value="date2" @click="show = true" />
      <van-calendar v-model="show" @confirm="onConfirm" />
    </div>
    <div class="box">
      <van-cell is-link title="订购人信息" />
    </div>
    <!-- 贺卡 -->
    <div class="box">
      <div class="flex">
        <div class="txt">是否填写纸质贺卡:</div>
        <van-switch v-model="checked" />
      </div>
      <van-field v-show="checked" v-model="message" rows="2" autosize label="贺卡" type="textarea" maxlength="200"
        placeholder="写上您的祝福语，可附上署名(200字内)， 请勿填写特殊符号和表情符号" show-word-limit />
    </div>
    <!-- 商品内容 -->
    <div class="box">
      <div v-for="item in shop" :key="item.ItemCode">
        <div class="cont">
          <img referrerpolicy="no-referrer" :src="item.img" alt="">

          <div class="cent">
            <p class="name">{{ item.Cpmc }}</p>
            <p class="number">x{{ item.count }}</p>
          </div>
          <div class="price">￥{{ item.Price }}</div>
        </div>
      </div>



      <van-cell is-link title="优惠卷/权益卡" />
    </div>
    <!-- 发票备注 -->
    <div class="box box_end">
      <van-cell is-link title="发票" />
      <van-field v-model="value" class="endIpn" label="备注" placeholder="选填" />
    </div>
    <div class="paymentEnd">
      <div class="PayPic">应付:
        <span>￥{{ $store.state.he }}</span>
      </div>
      <van-button round type="info" @click="submit" color="#ff734c">提交订单</van-button>
    </div>
  </div>
</template>

<script>
import Lheader from './components/LheaderView.vue';

export default {
  name: 'Payment',
  data() {
    return {
      date2: '',   //送达日期
      show: false,
      message: '', //贺卡内容
      checked: true, //开关摁钮 判断是否填写贺卡
      value: '', //备注
      shop: [],
      // he:0
    }
  },
  components: {
    Lheader,
  },
  watch:{
    // 送达日期
    // data2(){
    //   console.log('111');
    // }
  },
  created() {
    // console.log(this.$store.state.shopping);
    let arr = [];
    for (let index = 0; index < this.$store.state.shopping.length; index++) {
      const element = this.$store.state.shopping[index];
      if(element.flag == 1){
        arr.push(element)
      }
      
    }
    this.shop = arr;
    // this.he=this.$store.state.he
  },
  methods: {
    // 收货地址
    btnDizhi(){
      console.log('跳转收货地址');
    },

    // 提交
    submit(){
      // if(!this.data2){
      //   console.error('没有填收货日期！');
      //   return
      // }
      console.log('收货日期是'+ this.date2);
    },

    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
}
</script>

<style lang="less" scoped>
.payment {
  background-color: rgb(248, 247, 247);
  height: 100vh;
  padding-bottom: .9rem;
  // position: relative;
  // z-index: 10;
  overflow-x: hidden;

  .paymentEnd {
    background-color: #F7F9FA;
    width: 100%;
    height: 1.08rem;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 13;
    display: flex;
    align-items: center;

    .van-button {
      position: absolute;
      right: .3rem;
    }

    .PayPic {
      font-size: .24rem;
      padding-left: .4rem;

      span {
        font-size: .34rem;
        color: #FE6600;
      }
    }
  }

  .box_end {
    margin-bottom: 1.5rem;

  }

  .box {
    width: 7rem;
    padding: .2rem 0;
    // height: 1.74rem;
    margin: .3rem auto;
    background-color: #fff;
    border-radius: .2rem;
    overflow: hidden;

    .cont {
      display: flex;
      width: calc(100% - .3rem);
      margin-bottom: .2rem;
      // justify-content: space-between;
      padding-left: .3rem;

      img {
        width: 1.28rem;
        height: 1.4rem;
        margin-right: .3rem;
      }

      .price {
        line-height: 1.4rem;
        font-size: .4rem;
        font-weight: 700;
      }

      .cent {
        margin-top: .1rem;
        font-size: .36rem;
        width: 3.6rem;
        margin-right: .2rem;
        overflow: hidden;

        .number {
          margin-top: .4rem;
        }
      }
    }

    .flex {
      display: flex;
      align-items: center;
      padding-left: .5rem;
      font-size: .35rem;

      .txt {
        margin-right: 2.2rem;
      }

    }

    .van-field {
      background-color: #fff0ec;
    }

    .endIpn {
      background-color: #fff;
    }
  }

  .header {
    height: .88rem;
    border-bottom: solid 1px #ccc;
  }

  .van-notice-bar {
    font-size: .22rem;
  }
}
</style>